<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--普通div组获取复选框数据-->
<!--<div class="layui-btn-group demoTable">-->
<!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>-->
<!--<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>-->
<!--<button class="layui-btn" data-type="isAll">验证是否全选</button>-->
<!--</div>-->

<!--头部工具条-->
<script type="text/html" id="headbar">
    <div class="layui-btn-container"  >
        <!--使用表达式让按钮动态显示，if条件为true则显示，false不显示-->
        {{#  if(insert){ }}
        <button type="button" class="layui-btn" lay-event="insert">增加
            <i class="layui-icon">&#xe654;</i>
        </button>
        {{#  } }}
        {{#  if(del){ }}
        <button class="layui-btn layui-btn-danger" lay-event="getCheckData">批量删除
            <i class="layui-icon">&#xe640;</i>
        </button>
        {{#  } }}
    </div>
</script>
<!-- 每一行工具条 -->
<script type="text/html" id="barDemo">
    {{#  if(update){ }}
    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm" lay-event="singleUpdate">
        <i class="layui-icon">&#xe642;</i> 修改
    </button>
    {{#  } }}

    {{#  if(del){ }}
    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="singleDel">
        <i class="layui-icon">&#xe640;</i> 删除
    </button>
    {{#  } }}
</script>
<!--头部工具条获取复选框数据-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<!---------------------------------------------条件搜索框------------------------------------------->
<div class="demoTable" style="margin-top: 10px;margin-left: 10px">
    <form id="serachForm" class="layui-form">
        商品名：
        <div class="layui-inline" style="width: 100px">
            <input class="layui-input" name="name" id="searchName" autocomplete="off">
        </div>
        商品编号：
        <div class="layui-inline" >
            <input class="layui-input" id="scode" name="proCode" autocomplete="off">
        </div>

        <div class="layui-inline" style="width: 200px;margin-right: 10px">
            <label class="layui-form-label">上架状态</label>
            <div class="layui-input-block">
                <select name="status" id="status" lay-filter="aihao">
                    <option value="" selected>全部</option>
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
            </div>
        </div>

        <div class="layui-inline" style="width: 250px;margin-right: 10px">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <select  name="businessName" id="businessName">
                    <option value="" selected>所有品牌</option>
                    <option v-for="busi in allBusiness" v-bind:value="busi.businessId">{{busi.businessName}}</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="width: 250px;margin-right: 10px">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select  name="proType" id="proType">
                    <option value="" selected>所有类型</option>
                    <option v-for="obj in allProTypes" v-bind:value="obj.producttypeId" v-text="obj.producttypeName"><!--{{obj.productTypeName}}--></option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 10px">
            <!--这个地方的不能直接使用button标签，使用button标签会重复提交数据-->
            <input type="button" class="layui-btn" data-type="reload" value="搜索">
        </div>

    </form>
</div>
<!-----------------------------------------表格内容--------------------------------------------->
<div id="content">
    <table class="layui-table"
           lay-data="{url:'/houtai/products/getProducts',page:true,limit:5,limits:[5,10],toolbar:'#headbar',
                     height:'full-100',totalRow:true,loading:true,title:'商品信息表',
                     //把返回的数据result转为换layUI需要的格式，此处返回的是mybatisPlus的IPage对象，具体返回值自己设定
                     parseData: function(res){ //res 即为原始返回的数据
                        console.log(res);
                        return {
                            'code': res.code, //解析接口状态
                            'msg': res.message, //解析提示文本
                            'count': res.obj.totalSize, //解析数据长度
                            'data': res.li //解析数据列表
                          };
                       },
                //给表格设置一个ID
               id:'test'}"
           lay-filter="filter">
        <thead>
        <tr>
            <th lay-data="{checkbox:true}"></th><!--开起全选框-->
            <th lay-data="{field:'productId', sort: true,hide:true}">商品ID</th><!--field：实体类属性，sort：排序-->
            <th lay-data="{field:'productName'}">商品名</th>
            <th lay-data="{field:'productDesc', sort: true}">商品描述</th>
            <th lay-data="{field:'business',
                templet:function (d) {
                    return d.business.businessName;
                }
            }">品牌名</th>

            <th lay-data="{field:'productPrice'}">单价</th>
            <th lay-data="{field:'promotionPrice'}">促销价</th>
            <th lay-data="{field:'productNum'}">库存</th>
            <th lay-data="{field:'productCode'}">商品编号</th>
            <th lay-data="{field:'productType',templet:function (d) {
                    if(d.productType == 1){
                        return '火锅底料';
                    }else if(d.productType == 0){
                        return '不知名';
                    }
                }}">类型</th>
            <th lay-data="{field:'productStatus',templet:function (d) {
                    if(d.productStatus == 1){
                        return '在售';
                    }else if(d.productStatus == 0){
                        return '已下架';
                    }
                }}">是否在售</th>
            <!--最后一列操作列，有修改或删除的权限就显示这列，否者不显示，通过Vue实现-->
            <th v-if="isShow" lay-data="{field:'opeartion', toolbar: '#barDemo'}">操作</th>

        </tr>
        </thead>
    </table>
</div>
<!--这里是修改弹出层的表单信息
表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
<div class="layui-row" id="popUpdateUser" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" style="margin-top:20px">
            <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                    <input type="text" name="uid"  required  lay-verify="required" autocomplete="off" id="uid" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username"  required  lay-verify="required" autocomplete="off" :value="user.username"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <input class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11" value="确认修改">
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../../layuiadmin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script>
    var insert = false;
    var del= false;
    var update= false;
    var isShow=false;
    $(function () {
        // insert = true;
        // del = true;
        // update = true;
    });
    //利用Vue判断是否具备每一行的删除或者修改权限
    var vue = new Vue({
        el:"#content",
        data:{
            user:"",
            buttons:[],
            allBusiness:[],
            allProTypes:[]
        },
        created:function(){
            var _this = this;
            $.ajax({
                url : "/houtai/page/products/product/list",
                type : "get",
                dataType : "json",

                success : function(data) {
                    if(data.message=="success"){

                    }else{
                        alert(data.message);
                    }
                }
            });
            $.ajax({
                url : "/houtai/page/products/product/getAllBusiness",
                type : "get",
                dataType : "json",
                async: false,
                success : function(data) {
                    console.log(data);
                    _this.allBusiness = data.li;
                    console.log("_this.allBusiness:"+JSON.stringify(_this.allBusiness));
                }
            });
            $.ajax({
                url : "/houtai/page/products/product/getAllProTypes",
                type : "get",
                dataType : "json",
                async: false,
                success : function(data) {
                    _this.allProTypes = data.li;
                }
            });
        },

        methods: {

        },
        computed:{
            isShow:function () {
                var _this = this;
                var delbtn=false;
                var updatebtn=false;
                //获取当前网页地址
                var url = location.href.split("localhost:8080")[1];
                $.ajax({
                    url: "/houtai/adminuser/buttons",
                    type: "get",
                    async: false,
                    data: {
                        url: url
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        _this.buttons = data.li;
                        // console.log(insert);
                        for(var i=0;i<_this.buttons.length;i++){
                            console.log("=====进循环了");
                            if(_this.buttons[i].menuUrl.indexOf("insert")!=-1){
                                console.log("=====进去了");
                                insert = true;
                                console.log(insert);
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("delete")!=-1){
                                del = true;
                                isShow = true;
                                delbtn = true;
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("update")!=-1){
                                update = true;
                                isShow = true;
                                updatebtn =  true;
                                break;
                            }
                        }

                    }
                });
                console.log("---------");
                console.log(delbtn);
                console.log(updatebtn);

                if(delbtn||updatebtn){
                    return true;
                }else{
                    return false;
                }

            }
        }

    })

    layui.use(['table','jquery','laypage'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        //监听复选框
        table.on('checkbox(filter)', function(obj){
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        //监听行单击/双击事件（双击事件为：rowDouble,单击事件为：row，参数为表格lay-filter的值）
        // table.on('rowDouble(filter)', function(obj){
        //     var _this = this;
        //     var data = obj.data;
        //     _this.user = data;
        //     console.log(_this.user);
        //     //暂时不清楚layUI怎么给弹出层传值，尝试Vue的:value和v-model都不行，只能用jQuery传值了
        //     $("#uid").val(_this.user.uid);
        //     // layer.alert(JSON.stringify(data), {
        //     //     title: '当前行数据：'
        //     // });
        //
        //     //标注选中样式
        //     // obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        //
        //     //开起弹出层
        //     layer.open({
        //         //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        //         type: 1,
        //         title: "修改用户信息",
        //         area: ['450px', '600px'],//设置弹出层尺寸
        //         content: $("#popUpdateUser")//引用的弹出层的页面层的方式加载修改界面表单
        //         });
        //     //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
        //     // setFormValue(obj,data);
        //
        // });

        //监听顶部工具栏事件
        table.on('toolbar(filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'insert':
                    layer.msg('添加');
                    break;
                //点击批量删除执行以下代码
                case 'getCheckData':
                    layer.confirm('真的删除行么', function(index){
                        // obj.del();
                        layer.close(index);
                        var data = checkStatus.data;
                        var uids = new Array();
                        for(var i = 0;i < data.length;i++){
                            uids.push(data[i].uid);
                        }
                        console.log(uids);
                        var s = JSON.stringify(uids);
                        $.ajax({
                            url:"/userinfo/deleteUsers",
                            data:{uids:s},
                            type:"post",
                            // dataType:"json",
                            success:function (data) {
                                if(data == "success"){
                                    layer.msg("删除成功",{icon: 6});
                                    //重载表格
                                    $(".layui-laypage-btn").click()
                                }else if(data == "NoPremission"){
                                    location.href = "NoPremission.html";
                                }else{
                                    layer.msg("删除失败", {icon: 5});
                                }
                            }
                        })
                    });
                    break;
            };
        });



        //监听复选框数据，但是无法监听头部工具条事件（意义不大）
        // var $ = layui.$, active = {
        //     getCheckData: function(){ //获取选中数据
        //         var checkStatus = table.checkStatus('test')
        //             ,data = checkStatus.data;
        //         layer.alert(JSON.stringify(data));
        //     }
        //     ,getCheckLength: function(){ //获取选中数目
        //         var checkStatus = table.checkStatus('test')
        //             ,data = checkStatus.data;
        //         layer.msg('选中了：'+ data.length + ' 个');
        //     }
        //     ,isAll: function(){ //验证是否全选
        //         var checkStatus = table.checkStatus('test');
        //         layer.msg(checkStatus.isAll ? '全选': '未全选')
        //     }
        // };
        // $('.demoTable .layui-btn').on('click', function(){
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });
        //设置搜索框查询条件
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var str = $("#serachForm").serialize();
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name:$("#searchName").val(),
                        proCode:$("#scode").val(),
                        status:$("#status").val(),
                        businessName:$("#businessName").val(),
                        proType:$("#proType").val()
                    }
                }, 'data');
            }
        };

        //监听搜索框提交按钮
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>

</body>
</html>